<!DOCYPE html>
<html lang="en">
<head>
	<title>微博</title>
	<meta charset="UTF-8" />
	<style text="text/css">
		*{
			margin:0;
			padding:0;
		}
		#div{
			font-size:20px;
			position:relative;
			top:30px;
			left:60px;
			height:154px;
			width:82px;
		}
		a{
			border:1px #ccc solid;
			height:40px;
			width:2px;
			padding:6px 20px 0 20px;
			background-color:#ccc;
		}
		ul{
			border:1px #ccc solid;
			height:130px;
			width:80px;
			background-color:#c0ff3e;
			display:none;
		}
		ul li{
			list-style:none;
			height:42px;
			width:80px;
		}
		ul li:hover{
			background-color:#BCEE68;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
		
		document.getElementById('div').onmouseover = show;
		document.getElementById('div').onmouseout = hide;
		
		function show(){
			document.getElementById('ul').style.display = 'block';
		}
		function hide(){
			document.getElementById('ul').style.display = 'none';
		}
		}
	</script>
</head>
<body>
	<div id="div">
		<a id="a">微博</a>
		<ul id="ul">
			<li>私信</li>
			<li>评论</li>
			<li>@我</li>
		</ul>
	</div>
	
	
</body>
</html>